<div class="container" style="margin-top:150px;">
  <div class="oeuvre-box" *ngFor="let item of list;let i = index">
    <a [routerLink]="'opus-details/' + item.id">
      <div class="oeuvre ">
        <nz-card nzHoverable style="width:300px" [nzCover]="coverTemplate">
          <nz-card-meta [nzTitle]="item.title" nzDescription=""></nz-card-meta>
          <div class="browse-box">
            <span class="span">
              <i nz-icon nzType="eye" nzTheme="outline"></i><span class="browsestyle">{{item.browse}}</span>
            </span>
            <span class="span">
              <i nz-icon nzType="message" nzTheme="outline"></i><span class="browsestyle">{{item.commentVolume}}</span>
            </span>
          </div>
        </nz-card>
        <ng-template #coverTemplate>
          <img alt="example" [src]="imgPrefixUrl + item.cover" style="height:250px;overflow: hidden;" />
        </ng-template>
      </div>
    </a>
  </div>
</div>

<div class="container" style="text-align: center;">

  <nz-pagination [nzPageIndex]="1" [nzTotal]="lists.length" nzShowQuickJumper nzPageSizeOptions=10
    nzHideOnSinglePage=true (nzPageIndexChange)="skip($event)" [nzPageSize]="9"></nz-pagination>
</div>